<template>
    <div>
        <div class="recommend-title">周末去哪儿</div>
        <ul>
            <router-link to="/detail" tag="li" v-for="(item,index) of weekendList" :key="index" class="list-item">
                <div class="item-img">
                    <img  :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <div class="item-info-title">{{ item.theme }}</div>
                    <div class="item-info-comment">{{ item.description }}</div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Recommend',
    props: {
        weekendList: Array
    }
}
</script>

<style lang="stylus" >
@import '../../../assets/styles/variables.styl';
@import '../../../assets/styles/mixins.styl';

    div{
        box-sizing: border-box;
    }

    .recommend-title{
        width: 100%;
        height: .8rem;
        line-height: .8rem;
        font-size: .28rem;
        background-color: #eee;
        padding: 0 .2rem;
    }


    .list-item .item-img{
        width: 100%;
    }

    .list-item .item-img img{
        width: 100%;
    }


    .list-item .item-info{
        padding: .14rem .2rem .2rem;
    }

    .list-item .item-info .item-info-title{
        width: 100%;
        height: .48rem;
        line-height: .48rem;
        font-size: .28rem;
        ellipsis()
    }

    .list-item .item-info .item-info-comment{
        width: 100%;
        height: .42rem;
        line-height: .28rem;
        font-size: .24rem;
        color: $lightTxtColor;
    }


</style>